import React, { useState, useTransition } from 'react'
import { sleep } from 'radash'

export function Transition () {

    const [ counter, setCounter ] = useState<number>(100)

    const [ isPending, startTransition ] = useTransition()

    const increment = () => {
        startTransition(async () => {
            await sleep(1000)
            setCounter((prev: number) => prev + 1)
            console.log('isPending: ', isPending)
        })
    }
    return (
        <div className={ 'p-20 bg-slate-500 text-white' }>
            <p>{ counter }</p>
            <button className={ 'py-3 px-5 bg-purple-500 disabled:cursor-not-allowed' }
                    disabled={ isPending }
                    onClick={ increment }>
                increment
            </button>
        </div>
    )
}
